<template>
  <div id="drawer-set">
    <Drawer :title="title" :closable="true" width='640' :transfer='false' :value="historyStatus" class="history-draw" @on-close='colse'>
      <ul class="animation-set" v-if="showType === '1'">
        <li v-for="(item,idx) in animationList" :key='idx' @click="checkMaterial(item)">
          <div class="check-icon">
            <!-- <Icon :type="checkedUrl === item.url?'ios-checkmark-circle':'ios-alert-outline'" style="color:#2D8CF0" size='24' /> -->
            <Icon type="ios-checkmark-circle" style="color:#2D8CF0" size='24' v-if='checkedUrl === item.url' />
            <span style="background: #fff;display:inline-block;width:20px;height:20px;border-radius:50%" v-if='checkedUrl !== item.url'></span>
          </div>
          <div>
            <img :src="item.url" alt="">
          </div>
          <p class="desc">{{item.createTime}}</p>
        </li>
      </ul>
      <Table :columns="columnsHistory" :data="historyData" v-if="showType === '2'" class="animation-table" :height='getHeight'>
        <template slot-scope="{ row }" slot="configValue">
          <div class="animation-img">
            <img :src="row.configValue" alt="">
          </div>
        </template>
      </Table>
      <div class="demo-drawer-footer">
        <Page :total="pageObj.total"
            :current="pageObj.pageIndex"
            :page-size="pageObj.pageSize"
            show-sizer
            show-total
            @on-change='changePageIndexHistory'
            @on-page-size-change='changePageSizeHistory' />
        <Row v-if="showType === '1'" type='flex' justify="end" style="padding-top:10px">
          <Col>
            <Button style="margin-right: 8px;width:80px" @click="cancle">取消</Button>
            <Button type="primary" style="width:80px" @click="submit" :disabled='isDisabled'>确定</Button>
          </Col>
        </Row>
      </div>
    </Drawer>
  </div>
</template>

<script>
export default {
  name: 'drawer-set',
  computed: {
    getHeight () {
      let historyTableHeight = 0
      if (this.historyData.length > 9) {
        historyTableHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 103
      } else {
        historyTableHeight = 0
      }
      return historyTableHeight
    }
  },
  data () {
    return {
      columnsHistory: [
        {
          title: '发布时间',
          key: 'createTime'
        },
        {
          title: '待机动画物料',
          slot: 'configValue'
        },
        {
          title: '操作人',
          key: 'creatorName',
          width: 160
        }
      ]
    }
  },
  props: {
    isDisabled: {
      type: Boolean,
      default: false
    },
    checkedUrl: {
      type: String,
      default: ''
    },
    showType: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    historyStatus: {
      type: Boolean,
      default: false
    },
    pageObj: {
      type: Object,
      default: () => {}
    },
    historyData: {
      type: Array,
      default: () => []
    },
    animationList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    colse () {
      this.$emit('oncolse')
    },
    cancle () {
      this.$emit('oncolse') // 后期更改
    },
    submit () {
      this.$emit('submit') // 后期更改
    },
    changePageIndexHistory (index) {
      this.$emit('onChangePageIndex', index)
    },
    changePageSizeHistory (size) {
      this.$emit('onChangePageSize', size)
    },
    checkMaterial (item) {
      this.$emit('selectMaterial', item)
    }
  }
}
</script>

<style lang='less'>
  #drawer-set{
    .history-draw{
      .animation-table{
        .animation-img {
          padding: 10px 0;
          img{
            display: block;
            width: 90px;
            height: 60px;
          }
        }
      }
      .animation-set{
        margin-bottom: 53px;
        padding: 20px 65px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li{
          list-style: none;
          margin-bottom: 32px;
          position: relative;
          .check-icon{
            position: absolute;
            top: 5px;
            right: 5px;
          }
          img{
            display: block;
            width: 180px;
            height: 120px;
          }
          .desc{
            text-align: center;
            background: #F8F8F9;
            line-height: 40px;
            height: 40px;
          }
        }
      }
      .ivu-table-wrapper {
        border: 0;
      }
      .ivu-drawer-body {
        padding: 0;
        height: ~"calc(100% - 103px)";
      }
      .demo-drawer-footer {
        width: 640px;
        position: fixed;
        bottom: 0;
        right: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
        z-index: 666;
      }
    }
  }
</style>
